<template>
  <div class="all_into_page page_scroll">

    <!-- 搜索区域 开始 -->
    <div class="search_box">
      <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="公司名称：">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="城市：">
          <el-input v-model="searchForm.city"></el-input>
        </el-form-item>
        <el-form-item label="产品：">
          <el-select v-model="searchForm.productId">
            <el-option v-for="(item,index) in BEHINDSTATUSLIST" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="searchForm.status">
            <el-option label="合作中" value="1"></el-option>
            <el-option label="暂停合作" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索区域 end -->

    <!-- 操作区域 开始 -->
    <div class="link_groups">
      <el-button type="primary" size="small" @click="openDialog()">新增公司</el-button>
    </div>
    <!-- 操作区域 end -->

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table ref="elTable" class="el_table" :data="dataList" border @selection-change="onTableChange">
        <!-- <el-table-column type="selection" width="46" align="center" /> -->
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="公司全称" prop="name" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="公司简称" prop="nickname" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="公司地址" prop="address" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="企业信用编码" prop="orgCode" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="管理员姓名" prop="adminName" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="管理员手机号" prop="adminPhone" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="合作产品" prop="productName" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="合作城市" prop="city" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" prop="status" :width="tdWidth" show-overflow-tooltip>
          <template slot-scope="{row}">{{row.status == 1?'合作':'暂停'}}</template>
        </el-table-column>
        <el-table-column label="自动分配" prop="auto" :width="tdWidth" show-overflow-tooltip>
          <template slot-scope="{row}">{{row.status == 1?'是':'否'}}</template>
        </el-table-column>
        <el-table-column label="创建人" prop="noProcessDay" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建日期" prop="createDate" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="修改人" prop="noProcessDay" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="修改日期" prop="updateDate" :width="tdWidth" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="240" fixed="right">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" :id="row.id" @click="openDialog(row)">编辑</el-button>
            <el-button type="primary" size="small" v-if="row.status == 0" @click="updateStatus(row)">开启合作</el-button>
            <el-button type="primary" size="small" v-if="row.status == 1" @click="updateStatus(row)">暂停合作</el-button>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination v-model="page" :total="totalCount" @change="pageOnChange" />
    </div>
    <!-- 列表区域 end -->

    <!-- 新增公司 开始 -->
    <glsx-dialog :show="showDialog" :title="currentInfo.id?'编辑公司':'新增公司'" @close="closeDialog()">
      <div>
        <add-company ref="addCompany" :info="currentInfo" v-if="showDialog" @change="onChange"></add-company>
      </div>
      <template slot="footer">
        <el-button type="primary" :loading="loading" size="small" @click="saveInfo()">保存</el-button>
        <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
      </template>
    </glsx-dialog>
    <!-- 新增公司 end -->

  </div>
</template>
<script>
import { deepClone, showModal, showToast } from "@/utils/util";
import { GET_THIRD_PARTY_PAGE, UPDATE_THIRD_PARTY_INFO } from "@/http/customer";
import {
  BEHINDSTATUSLIST,
  SHOWBEHINDSTATUSLIST,
  SEXTYPELIST,
} from "@/common/constants";
import GlsxDialog from "@/components/Dialog";
import AddCompany from "./add.vue";
export default {
  components: {
    GlsxDialog,
    AddCompany,
  },
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      BEHINDSTATUSLIST,
      SHOWBEHINDSTATUSLIST,
      sortTdWidth: 56,
      smallWidth: 110,
      tdWidth: 160,
      longTdWidth: 500,
      showDialog: false,
      checkList: [],
      selectItem: {},
      dialogFormVisible: false,
      updateLoading: false,
      SEXTYPELIST,
      loading: false,
      currentInfo: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 分页切换事件
    pageOnChange(page) {
      this.page = page;
      this.getList();
    },

    // 获取参数
    getParams() {
      const oParams = {};
      const o = deepClone(this.searchForm);
      const m = o.searchTime;
      if (m && m.length > 0) {
        o.startDate = m[0];
        o.endDate = m[1];
      }
      delete o.searchTime;
      oParams.size = this.pageSize;
      oParams.paramObject = o;
      return oParams;
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams();
      oParams.page = current || this.page;
      GET_THIRD_PARTY_PAGE(oParams).then((res) => {
        const obj = res.data || {};
        this.dataList = obj.dataList || [];
        this.totalCount = obj.totalCount;
      });
    },

    // 打开弹框
    openDialog(row) {
      this.showDialog = true;
      if (row) {
        this.currentInfo = deepClone(row);
      }
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.currentInfo = {};
    },

    // 监听表格选中
    onTableChange(selection) {
      console.log(selection);
      this.checkList = selection;
    },

    // 监听组件变化
    onChange(e) {
      this.loading = false;
      if (e) {
        this.showDialog = false;
        this.getList();
      }
    },

    // 保存合作公司信息
    saveInfo() {
      this.loading = true;
      this.$refs.addCompany.saveInfo();
    },

    // 开启、暂停合作
    updateStatus(row) {
      let _this = this;
      showModal({
        message: `确定对${row.name}企业${
          row.status == 1 ? "暂停" : "开启"
        }合作吗？`,
        showCancelButton: true,
        type: "warning",
        success: function () {
          _this.updateInfo(row);
        },
      });
    },

    // 更新企业状态
    updateInfo(row) {
      let oParams = { ...row };
      if (row.status == 1) {
        oParams.status = 0;
      } else {
        oParams.status = 1;
      }
      UPDATE_THIRD_PARTY_INFO(oParams).then((res) => {
        if (res.code == 200) {
          showToast({
            message: res.message,
            type: "success",
          });
          this.getList();
        }
      });
    },

  },
};
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
  .show_tips {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 10px 0;
  }
}
</style>
